<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all" />
</head>
<body>
<div class="layui-form" style="width: 600px; height: 500px; border:solid #00FFFF 1px; margin: 0 auto; margin-top: 20px; ">
    <form class="layui-form" action="/userData/add">

        <blockquote class="layui-elem-quote layui-text" style="margin-bottom: 20px;">
            <h1>新增资料</h1>
            <a th:href="@{/}">返回首页</a>
        </blockquote>

        <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px;" th:text="${'欢迎您,'+username}">欢迎您,xxx</label>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-inline">
                <label class="layui-form-label">资料名称</label>
                <div class="layui-input-inline">
                    <input type="tel" name="dataName" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">小组名称</label>
                <div class="layui-input-inline">
                    <input type="tel" name="userGroup" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">上传人</label>
                <div class="layui-input-inline">
                    <input type="tel" name="uploadPerson" th:value="${username}" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" >资料简介</label>
                <div class="layui-input-inline">
                    <input type="tel" name="dataInfo" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">上传附件</label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon">&#xe67c;</i>上传附件
                    </button>
                    <input type="hidden" name="dataUrl" id="hid_dataUrl"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item" >
            <div class="layui-inline">
                <button class="layui-btn"  style="margin-left: 40px;" type="submit"> 立即创建 </button>
                <button class="layui-btn" type="reset"> 取消 </button>
            </div>
        </div>
    </form>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>

<script>

    layui.use('upload', function(){
        var $ = layui.$ //重点处
            ,layer = layui.layer;
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/userData/upload/' //上传接口
            ,before:function(obj){
                layer.load(1, {
                    shade: [0.8,'#bbb'] //0.1透明度的白色背景
                }); //上传loading
            }
            ,done: function(res){
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#hid_dataUrl').val(res.dataName);
            }
            ,accept: 'file'
            ,size: 20*1024
            ,error: function(){
                //请求异常回调
                layer.msg("请求异常");
                layer.closeAll('loading'); //关闭loading
            }
        });
    });
</script>

</body>
</html>